<template>
    <component :is="component" />
</template>
<script setup>
import { userRouter } from './index.js'
import { computed } from 'vue'

// 初始化用户路由配置
const router = userRouter()

// 仅用于开发调试，输出当前路由信息
console.log(router);

/**
 * 计算属性，用于动态确定当前路由对应的组件。
 * 
 * @returns {Object|null} 返回当前路由对应的组件对象，如果没有匹配的路由则返回null。
 */
const component = computed(() => {
    // 在路由列表中查找当前激活的路由路径
    const route = router.routes.find(
        (route) => route.path == router.current.value
    )
    // 仅用于开发调试，输出计算过程信息
    console.log('......///////');
    // 返回当前路由对应的组件，如果没有匹配的路由则返回null
    return route? route.component:null
})
</script>